{% extends "base.html" %}

{% block title %}教师信息 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .info-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    .profile-card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
        overflow: hidden;
    }
    .profile-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        text-align: center;
        position: relative;
    }
    .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid rgba(255,255,255,0.2);
        object-fit: cover;
        margin-bottom: 1rem;
        transition: transform 0.3s ease;
    }
    .avatar:hover {
        transform: scale(1.05);
    }
    .profile-name {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }
    .profile-title {
        font-size: 1.125rem;
        opacity: 0.9;
        margin-bottom: 1rem;
    }
    .contact-info {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-top: 1rem;
    }
    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
    }
    .contact-item i {
        font-size: 1rem;
    }
    .section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .card {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid #007bff;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .card-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .card-text {
        color: #6c757d;
        margin-bottom: 0;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #dee2e6;
    }
    .table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #495057;
    }
    .table tr:hover {
        background-color: #f8f9fa;
    }
    .btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        transition: all 0.15s ease-in-out;
    }
    .btn-primary {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border-color: #6c757d;
    }
    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #545b62;
    }
    .btn-outline-primary {
        color: #007bff;
        border-color: #007bff;
        background-color: white;
    }
    .btn-outline-primary:hover {
        background-color: #007bff;
        color: white;
    }
    .btn-outline-secondary {
        color: #6c757d;
        border-color: #6c757d;
        background-color: white;
    }
    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: white;
    }
    .badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0.25rem;
    }
    .badge-primary {
        background-color: #007bff;
        color: white;
    }
    .badge-secondary {
        background-color: #6c757d;
        color: white;
    }
    .badge-success {
        background-color: #28a745;
        color: white;
    }
    .badge-info {
        background-color: #17a2b8;
        color: white;
    }
    .badge-warning {
        background-color: #ffc107;
        color: #212529;
    }
    .badge-danger {
        background-color: #dc3545;
        color: white;
    }
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .info-label {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .info-value {
        font-weight: 500;
        color: #495057;
    }
    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .tag {
        background-color: #e9ecef;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.875rem;
        color: #495057;
        transition: all 0.2s;
    }
    .tag:hover {
        background-color: #dee2e6;
    }
    /* 标签页导航 */
    .tab-container {
        border-bottom: 1px solid #dee2e6;
        margin-bottom: 2rem;
    }
    .tabs {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tab {
        margin-bottom: -1px;
    }
    .tab-link {
        display: block;
        padding: 1rem 1.5rem;
        text-decoration: none;
        color: #6c757d;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
        transition: all 0.2s;
    }
    .tab-link:hover {
        background-color: #f8f9fa;
        border-color: #e9ecef;
        color: #495057;
    }
    .tab-link.active {
        background-color: white;
        border-color: #dee2e6 #dee2e6 white;
        color: #495057;
        font-weight: 600;
    }
    .tab-content {
        margin-bottom: 2rem;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .info-container {
            padding: 0 1rem;
        }
        .section {
            padding: 1.5rem 1rem;
        }
        .profile-header {
            padding: 1.5rem 1rem;
        }
        .avatar {
            width: 120px;
            height: 120px;
        }
        .profile-name {
            font-size: 1.5rem;
        }
        .contact-info {
            flex-direction: column;
            gap: 0.75rem;
        }
        .tabs {
            overflow-x: auto;
        }
        .tab-link {
            white-space: nowrap;
        }
        .info-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-user-tie mr-2 text-primary"></i>教师信息
    </h1>
    <p class="text-gray-600">查看和管理教师个人信息</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="info-container">
    <!-- 教师信息概览 -->
    <div class="profile-card">
        <div class="profile-header">
            <img src="https://picsum.photos/id/1005/300/300" alt="教师头像" class="avatar">
            <h2 class="profile-name">李晓华</h2>
            <p class="profile-title">计算机科学与技术学院 教授</p>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fa fa-envelope"></i>
                    <span>lixiaohua@example.edu.cn</span>
                </div>
                <div class="contact-item">
                    <i class="fa fa-phone"></i>
                    <span>010-12345678</span>
                </div>
                <div class="contact-item">
                    <i class="fa fa-building"></i>
                    <span>计算机科学与技术学院</span>
                </div>
                <div class="contact-item">
                    <i class="fa fa-map-marker"></i>
                    <span>科技楼 503室</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 标签页导航 -->
    <div class="tab-container">
        <ul class="tabs">
            <li class="tab"><a href="#basic-info" class="tab-link active" data-toggle="tab">基本信息</a></li>
            <li class="tab"><a href="#teaching-info" class="tab-link" data-toggle="tab">教学信息</a></li>
            <li class="tab"><a href="#research-info" class="tab-link" data-toggle="tab">科研信息</a></li>
            <li class="tab"><a href="#contact-info" class="tab-link" data-toggle="tab">联系方式</a></li>
        </ul>
    </div>
    
    <!-- 标签页内容 -->
    <div class="tab-content">
        <!-- 基本信息标签页 -->
        <div id="basic-info" class="tab-pane active">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-id-card text-primary"></i>
                        基本信息
                    </h2>
                    <div>
                        <button class="btn btn-outline-primary" id="edit-basic-info-btn">
                            <i class="fa fa-edit mr-1"></i>编辑
                        </button>
                    </div>
                </div>
                
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">姓名</span>
                        <span class="info-value">李晓华</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">性别</span>
                        <span class="info-value">女</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">出生年月</span>
                        <span class="info-value">1975-03-15</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">民族</span>
                        <span class="info-value">汉族</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">籍贯</span>
                        <span class="info-value">北京市</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">政治面貌</span>
                        <span class="info-value">中国共产党党员</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">职称</span>
                        <span class="info-value">教授</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">职务</span>
                        <span class="info-value">计算机科学与技术学院副院长</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">入职时间</span>
                        <span class="info-value">2003-09-01</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">教师ID</span>
                        <span class="info-value">T20030012</span>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">个人简介</div>
                    <div class="card-text">
                        李晓华教授，博士，计算机科学与技术学院副院长。2003年毕业于清华大学计算机科学与技术系，获博士学位。主要研究方向为人工智能、机器学习、数据挖掘等。主持国家自然科学基金项目3项，省部级科研项目5项，发表SCI/EI检索论文80余篇，出版专著2部，获国家发明专利10余项。曾获校级教学成果一等奖2次，省级教学成果二等奖1次。
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">教育背景</div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>时间段</th>
                                <th>学校</th>
                                <th>专业</th>
                                <th>学位</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1998.09 - 2003.07</td>
                                <td>清华大学</td>
                                <td>计算机科学与技术</td>
                                <td>博士</td>
                            </tr>
                            <tr>
                                <td>1994.09 - 1998.07</td>
                                <td>北京大学</td>
                                <td>计算机科学与技术</td>
                                <td>学士</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 教学信息标签页 -->
        <div id="teaching-info" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-book text-primary"></i>
                        主讲课程
                    </h2>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>课程代码</th>
                            <th>课程名称</th>
                            <th>课程类型</th>
                            <th>学分</th>
                            <th>学期</th>
                            <th>学生人数</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CS301</td>
                            <td>人工智能导论</td>
                            <td>专业必修课</td>
                            <td>3</td>
                            <td>2024-2025学年第1学期</td>
                            <td>60</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-eye mr-1"></i>查看
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>CS402</td>
                            <td>机器学习</td>
                            <td>专业选修课</td>
                            <td>4</td>
                            <td>2024-2025学年第1学期</td>
                            <td>45</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-eye mr-1"></i>查看
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>CS501</td>
                            <td>高级人工智能</td>
                            <td>研究生课程</td>
                            <td>3</td>
                            <td>2024-2025学年第1学期</td>
                            <td>30</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-eye mr-1"></i>查看
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-graduation-cap text-primary"></i>
                        指导学生
                    </h2>
                </div>
                
                <div class="info-grid">
                    <div class="card">
                        <div class="card-title">博士研究生</div>
                        <div class="tag-list">
                            <span class="tag">张小明 (2021级)</span>
                            <span class="tag">王小红 (2022级)</span>
                            <span class="tag">李华 (2023级)</span>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-title">硕士研究生</div>
                        <div class="tag-list">
                            <span class="tag">赵小刚 (2022级)</span>
                            <span class="tag">孙小丽 (2022级)</span>
                            <span class="tag">陈小龙 (2023级)</span>
                            <span class="tag">刘小红 (2023级)</span>
                            <span class="tag">周小明 (2023级)</span>
                            <span class="tag">吴小丽 (2024级)</span>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">教学成果</div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>成果名称</th>
                                <th>成果类型</th>
                                <th>获奖等级</th>
                                <th>获奖时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>人工智能课程体系建设与实践</td>
                                <td>教学成果奖</td>
                                <td>校级一等奖</td>
                                <td>2022年</td>
                            </tr>
                            <tr>
                                <td>机器学习课程改革与创新</td>
                                <td>教学成果奖</td>
                                <td>省级二等奖</td>
                                <td>2020年</td>
                            </tr>
                            <tr>
                                <td>《人工智能导论》</td>
                                <td>教材</td>
                                <td>校级优秀教材</td>
                                <td>2021年</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 科研信息标签页 -->
        <div id="research-info" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-flask text-primary"></i>
                        科研项目
                    </h2>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>项目来源</th>
                            <th>项目级别</th>
                            <th>项目负责人</th>
                            <th>项目经费</th>
                            <th>起止时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>基于深度学习的智能推荐系统研究</td>
                            <td>国家自然科学基金</td>
                            <td>国家级</td>
                            <td>李晓华</td>
                            <td>80万元</td>
                            <td>2023-01至2026-12</td>
                        </tr>
                        <tr>
                            <td>大数据环境下的机器学习算法研究</td>
                            <td>省自然科学基金</td>
                            <td>省部级</td>
                            <td>李晓华</td>
                            <td>30万元</td>
                            <td>2022-01至2024-12</td>
                        </tr>
                        <tr>
                            <td>智能教育系统的关键技术研究</td>
                            <td>教育部重点实验室开放课题</td>
                            <td>省部级</td>
                            <td>李晓华</td>
                            <td>10万元</td>
                            <td>2024-01至2025-12</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-file-alt text-primary"></i>
                        代表性论文
                    </h2>
                </div>
                
                <div class="card">
                    <div class="card-title">2023年</div>
                    <div class="card-text">
                        1. Li XH, Zhang XM, Wang XH. A Novel Deep Learning Approach for Recommender Systems. IEEE Transactions on Neural Networks and Learning Systems, 2023, 34(5): 2345-2356.
                    </div>
                    <div class="card-text mt-2">
                        2. Li XH, Zhao XG, Sun XL. Machine Learning Techniques for Big Data Analysis. Journal of Machine Learning Research, 2023, 24(12): 1-32.
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">2022年</div>
                    <div class="card-text">
                        1. Li XH, Chen XL, Liu XH. Advanced Artificial Intelligence Methods for Educational Data Mining. Artificial Intelligence, 2022, 305: 103689.
                    </div>
                    <div class="card-text mt-2">
                        2. Li XH, Zhou XM, Wu XL. A Survey on Deep Learning for Natural Language Processing. ACM Computing Surveys, 2022, 55(2): 1-38.
                    </div>
                </div>
            </div>
            
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-lightbulb text-primary"></i>
                        专利与著作
                    </h2>
                </div>
                
                <div class="info-grid">
                    <div class="card">
                        <div class="card-title">发明专利</div>
                        <div class="card-text">
                            1. 李晓华, 张小明. 一种基于深度学习的智能推荐方法及系统. 专利号: ZL202210123456.7, 授权时间: 2023年.
                        </div>
                        <div class="card-text mt-2">
                            2. 李晓华, 王小红. 一种大数据分析方法及装置. 专利号: ZL202110654321.0, 授权时间: 2022年.
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-title">专著</div>
                        <div class="card-text">
                            1. 李晓华. 《人工智能原理与应用》. 清华大学出版社, 2022年.
                        </div>
                        <div class="card-text mt-2">
                            2. 李晓华, 赵小刚. 《机器学习算法与实践》. 高等教育出版社, 2020年.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 联系方式标签页 -->
        <div id="contact-info" class="tab-pane">
            <div class="section">
                <div class="section-header">
                    <h2 class="section-title">
                        <i class="fa fa-address-book text-primary"></i>
                        联系方式
                    </h2>
                </div>
                
                <div class="info-grid">
                    <div class="info-item">
                        <span class="info-label">办公电话</span>
                        <span class="info-value">010-12345678</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">手机号码</span>
                        <span class="info-value">138****5678</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">电子邮箱</span>
                        <span class="info-value">lixiaohua@example.edu.cn</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">办公地址</span>
                        <span class="info-value">科技楼 503室</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">邮政编码</span>
                        <span class="info-value">100084</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">工作时间</span>
                        <span class="info-value">周一至周五 9:00-17:00</span>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">学术兼职</div>
                    <div class="tag-list">
                        <span class="tag">中国计算机学会会员</span>
                        <span class="tag">IEEE会员</span>
                        <span class="tag">《计算机学报》编委</span>
                        <span class="tag">《软件学报》审稿人</span>
                        <span class="tag">多个国际会议程序委员会委员</span>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-title">社会兼职</div>
                    <div class="tag-list">
                        <span class="tag">教育部高等学校计算机类专业教学指导委员会委员</span>
                        <span class="tag">中国人工智能学会教育工作委员会副主任</span>
                        <span class="tag">北京市计算机学会常务理事</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="mb-6">
        <button class="btn btn-primary mr-2" id="print-info-btn">
            <i class="fa fa-print mr-1"></i>打印信息
        </button>
        <button class="btn btn-secondary" id="export-info-btn">
            <i class="fa fa-download mr-1"></i>导出信息
        </button>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const tabLinks = document.querySelectorAll('.tab-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const editBasicInfoBtn = document.getElementById('edit-basic-info-btn');
    const printInfoBtn = document.getElementById('print-info-btn');
    const exportInfoBtn = document.getElementById('export-info-btn');
    
    // 标签页切换功能
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除所有标签页的活动状态
            tabLinks.forEach(l => l.classList.remove('active'));
            tabPanes.forEach(p => p.classList.remove('active'));
            
            // 为当前点击的标签页添加活动状态
            this.classList.add('active');
            
            // 显示对应的标签页内容
            const targetId = this.getAttribute('href').substring(1);
            const targetPane = document.getElementById(targetId);
            if (targetPane) {
                targetPane.classList.add('active');
            }
            
            // 添加切换动画效果
            tabPanes.forEach(pane => {
                if (pane.classList.contains('active')) {
                    pane.style.opacity = '0';
                    pane.style.transform = 'translateY(10px)';
                    pane.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                    
                    setTimeout(() => {
                        pane.style.opacity = '1';
                        pane.style.transform = 'translateY(0)';
                    }, 50);
                }
            });
        });
    });
    
    // 编辑基本信息按钮点击事件
    editBasicInfoBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该跳转到编辑页面或弹出编辑模态框
        alert('编辑教师信息功能将在后续版本中实现');
    });
    
    // 打印信息按钮点击事件
    printInfoBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用打印功能
        window.print();
    });
    
    // 导出信息按钮点击事件
    exportInfoBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该调用导出功能
        alert('导出教师信息功能将在后续版本中实现');
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        // 为头像添加动画
        const avatar = document.querySelector('.avatar');
        avatar.style.opacity = '0';
        avatar.style.transform = 'scale(0.8)';
        avatar.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            avatar.style.opacity = '1';
            avatar.style.transform = 'scale(1)';
        }, 300);
        
        // 为基本信息添加动画
        const profileTextElements = document.querySelectorAll('.profile-name, .profile-title, .contact-info');
        profileTextElements.forEach((element, index) => {
            element.style.opacity = '0';
            element.style.transform = 'translateY(10px)';
            element.style.transition = `opacity 0.5s ease ${400 + index * 100}ms, transform 0.5s ease ${400 + index * 100}ms`;
            
            setTimeout(() => {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }, 400 + index * 100);
        });
        
        // 为标签页内容添加动画
        const activeTab = document.querySelector('.tab-pane.active');
        if (activeTab) {
            const sections = activeTab.querySelectorAll('.section');
            sections.forEach((section, index) => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(20px)';
                section.style.transition = `opacity 0.5s ease ${800 + index * 200}ms, transform 0.5s ease ${800 + index * 200}ms`;
                
                setTimeout(() => {
                    section.style.opacity = '1';
                    section.style.transform = 'translateY(0)';
                }, 800 + index * 200);
            });
        }
        
        // 为卡片添加悬停效果
        const cards = document.querySelectorAll('.card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
                this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
                this.style.boxShadow = 'none';
            });
        });
    });
</script>
{% endblock %}